<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
<script type="text/javascript" src="__PUBLIC__/jquery-1.10.2.min.js" ></script>
    <script type="text/javascript" src="__PUBLIC__/bootstrap/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/bootstrap/css/bootstrap.min.css">
   <script type="text/javascript"  src="__PUBLIC__/bootstrap3-validation.js"></script>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <link href="bootstrap-ie78.css" rel="stylesheet" type="text/css" />
    <script src="respond.min.js" type="text/javascript"></script> 
    <script src="html5.js" type="text/javascript"></script>
    <![endif]-->

  </head>

  <script type="text/javascript">
  $(function(){

    //1. 简单写法：
    $("#registerForm").validation({icon:true});

    // 要从后台数据确定填的邮箱是不是已注册过了，采用回调方法
    // $("form").validation(function(obj,params){
    //   if (obj.id=='mail'){
    //     $.post("/verifymail",{mail :$(obj).val()},function(data){
    //       params.err = !data.success;
    //       params.msg = data.msg;
    //     });
    //   }}
    //   ,{reqmark:true} //这个参数是设必填不要显示有星号，默认是有星号的
    // );

   
    //.注册
    $("#registerSubmit").on('click',function(event){
      // 2.最后要调用 valid()方法。
      //  valide(object,msg),提示信息显示，object位置后面增加提示信息。如不填object 则自动找最后一个button submit.
      //  valide(msg)
      
      //第一种提示写法
      if ($("#registerForm").valid(this,'内容出错')==false){
        return false;
      }
      
      //第二种提示写法，回调方法你自己提示就随意你了。
      //if ($("#form1").valid(this,function(err){alert(err)})==false){
      //  return false;
      //}
      

      
    })






  })
</script>

  <body>
  

    <!-- 水平排列的表单 -->
    <div class="container">
    <div class="page-header">
      <h1>用户注册<small></small></h1>
    </div>
    
     <form class="form-horizontal"  id="registerForm" action="register" role="form" method="post">
      <div class="form-group">
        <label for="inputPhone" class="col-sm-2 control-label">你的手机</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="inputPhone" check-type="required mobile" name="phone">
        </div>
      </div>
       
      <div class="form-group">
        <label for="inputName" class="col-sm-2 control-label">学生姓名</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="inputName" name="name" check-type="required" required-message="请填写学生姓名">
        </div>
      </div>
	  
	  <div class="form-group">
        <label for="inputSchool" class="col-sm-2 control-label">学生学校</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="inputSchool" name="school" check-type="required" required-message="请填写学生学校。">
        </div>
      </div>
	  
	  <div class="form-group">
        <label for="inputClass" class="col-sm-2 control-label">年级和班级</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="inputClass"  name="class" check-type="required" required-message="请填写年级和班级。">
        </div>
      </div>
       


      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" id="registerSubmit" class="btn btn-primary col-sm-4">注册</button>
          <button type="reset"  class="btn btn-primary col-sm-4">重置</button>
        </div>
      </div>


    </form>
  </div>






  </body>
</html>